@import "./mixin.scss";
@import "./color.scss";

.hover-tooltip-text {
  position: relative;

  .tooltip {
    display: none;
  }

  &:hover {
    .tooltip {
      &:empty {
        display: none;
      }

      display: block;
      -webkit-transition: display 0.15s ease-in-out;
      -moz-transition: display 0.15s ease-in-out;
      transform: translate(0px, 5px);
      z-index: 10;
    }
  }
}

.white-text {
  color: #ffffff;
}

.grey-text {
  color: #9d9c9c;
}

.second-size {
  font-size: 16px;
}

.primary-size {
  font-size: 14px;
}

.message-box {
  display: flex;

  .avatar,
  .message-name {

    margin-right: 12px;
  }

  .message-name {

    display: none;
  }

  // 头像
  .avatar {
    width: 30px;
    height: 30px;
    border-radius: $common-border-radius-3;
  }

  .message-time {
    $paddingBottom: 7px;
    line-height: 1;
    font-size: 14px;

    color: $time-primary-color;

    .time {
      display: inline-block;
      padding-bottom: $paddingBottom;
      @include setEmptyHidden();

    }

    .name {
      display: inline-block;
      padding-right: 8px;
      padding-bottom: $paddingBottom;
      @include setEmptyHidden();
    }
  }

  .message-dialog {
    display: flex;
    flex-direction: column;
    flex: 1;

    &.chat {
      flex: 0.75;
    }
  }

  // 以前的样式
  .gnt-pic {
    display: inline-block;
  }

  // 聊天记录
  .message-content-chat {
    padding: 0;
    background-color: #0b2d41;
    @include setMaxAndMin(100%, 100%);
    // .message-dialog {
    //   flex: none;
    // }
    .chat-title {
      color: #ffffff;
      padding: 0 16px;
      height: 42px;
      line-height: 42px;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-bottom-color: #264c63;

      .chat-text {
        font-size: 14px;
      }
    }

    .chat-content {
      padding: 12px 14px 14px 14px;

      .message-box.left {
        @include messageContent();
      }

      .message-box.right {
        @include messageContentSend();
      }

      .message-box.left, .message-box.right {
        flex-direction: row;

        .message-content {

          align-self: flex-start;
        }
      }

      //.message-box.chat {
      //
      //  @include messageContent();
      //  @include messageContentSend();
      //
      //}

      // .avatar {
      //   display: none;
      // }
      // .message-name {
      //   display: block;
      //   &:after
      //   {
      //     content:':'
      //   }
      // }
    }
  }

  // 对话内容
  .message-content {
    word-break: break-all;
    font-size: 14px;
    padding: 10px 14px 10px 14px;
    border-radius: $common-border-radius;
    width: max-content;
    @include setMaxAndMin(auto, 560px);

    .money-head {
      padding: 0 18px;
      height: 72px;
      display: flex;
      align-items: center;
    }

    .money-footer {
      padding: 0 18px;
      height: 32px;
      display: flex;
      align-items: center;
      background-color: #ffffff;
    }

    // 文件类型
    &.file {
      display: flex;
      @include setMaxAndMin(280px, 280px);
      padding: 14px;

      .file-img {
        width: $file-image-size;
        height: $file-image-size;
        display: inline-block;
      }

      .file-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 16px;
        width: 0;
        flex: 1;
      }
    }

    // 网页类型
    &.web {
      @include setMaxAndMin(360px, 360px);
      $currentHeight: 42px;
      padding: 0;

      .web-title {
        height: $currentHeight;
        line-height: $currentHeight;
        padding: 0 14px;
        font-size: 16px;
      }

      .web-content {
        padding: 0 14px 14px 14px;
        display: flex;
        font-size: 14px;

        .web-content--text {

          width: calc(100% - #{$common-image-size});
          padding-right: 14px;
        }

        .web-img {
          border-radius: $common-border-radius;
          width: $common-image-size;
          height: $common-image-size;
        }
      }

      .web-url {
        font-size: 14px;
        padding: 0 14px;
        border-top-width: 1px;
        border-top-style: solid;
        height: 36px;
        line-height: 36px;
        border-top-color: #a8a8a8;
      }
    }

    // 地图类型
    &.map {
      @include setMaxAndMin(300px, 200px);
      padding: 14px;

      .map-title {
        font-size: 16px;
        margin-bottom: 16px;
      }

      .map-desc {
        font-size: 14px;
        margin-bottom: 12px;
      }

      .map-img {
        border-radius: 10px;
        width: 100%;
      }
    }

    &.img {
      @include setMaxAndMin(200px, 200px);
    }

    &.audio {
      cursor: pointer;
      @include setMaxAndMin(initial, initial);
      white-space: nowrap;
      padding: 0;
      width: min-content;
      min-width: 136px;

      .message-midea {
        display: flex;
        align-items: center;
        height: 38px;

        padding-left: 16px;
        padding-right: 16px;

        img {
          margin-right: 12px;
          width: 18px;
        }
      }
    }

    &.money {
      @include setMaxAndMin(280px, 280px);
      padding: 0;
      overflow: hidden;
      box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    }

    &.transfer {
      .transfer-head {
        background-color: #f09028;

        img {
          width: 42px;
          margin-right: 14px;
        }
      }
    }

    &.hongbao {
      .hongbao-head {
        background-color: #f09028;

        img {
          height: 42px;
          margin-right: 14px;
        }
      }
    }

    &.group {
      .group-head {
        background-color: #00b382;

        img {
          height: 42px;
          margin-right: 14px;
        }
      }
    }

    &.personalCard {
      @include setMaxAndMin(240px, 240px);
      padding: 14px;

      .personalCard-footer {
        font-size: 16px;
        padding-top: 14px;
      }

      .personalCard-head {
        display: flex;
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        padding-bottom: 14px;

        .personalCard-img {
          width: $file-image-size;
          height: $file-image-size;
          border-radius: $common-border-radius-2;
        }

        .personalCard-name {
          padding-left: 14px;
          width: calc(100% - #{$file-image-size});
        }
      }
    }
  }

  // 消息状态
  .message-status {
    line-height: 1;
    margin-top: 8px;
    font-size: $message-status-size;
    color: $message-status-color;
    @include setEmptyHidden()
  }

  //居中布局
  &.center {
    justify-content: center;
    align-items: center;
  }

  // 左布局
  &.left {
    @include messageContent();
  }

  // 右布局
  &.right {
    flex-direction: row-reverse;

    .message-content {
      align-self: flex-end;

      &.audio {
        .message-midea {
          flex-direction: row-reverse;
          padding-left: 16px;
          padding-right: 16px;

          img {
            margin-left: 12px;
            margin-right: 0px;
            transform: rotateY(180deg);
          }
        }
      }

    }

    @include messageContentSend(); // 头像
    .avatar,
    .message-name {
      margin-left: 12px;
      margin-right: 0px;
    }

    .message-image {
      text-align: right;
    }

    // 对话框

    .message-status,
    .message-time {
      text-align: right;
    }
  }

  //聊天布局
  &.right {
    .message-content-chat {
      @include messageContent();
      @include messageContentSend();
      flex-direction: row;

      .avatar,
      .message-name {
        margin-left: 0px;
        margin-right: 12px;
      }

      .message-image {
        text-align: left;
      }

      // 对话框
      &.audio {
        .message-midea {
          flex-direction: row;
          padding-left: 16px;
          padding-right: 16px;

          img {
            margin-left: 0px;
            margin-right: 12px;
            transform: rotateY(0deg);
          }
        }
      }

      .message-status,
      .message-time {
        text-align: left;
      }
    }
  }
}

